import React, { useEffect, useState } from 'react'
import { Form, Input, Button, DatePicker, Col, Row } from 'antd';
import { Table, Select } from 'antd';
import { Modal, message } from 'antd';
import { Link } from "react-router-dom"

import axios from 'axios'

import "antd/dist/antd.css";
import "./jiJiaGuanLi.css"

export default function JiJiaGuanLi(props) {
    const [isModalVisible1, setIsModalVisible1] = useState(false);
    const [isModalVisible2, setIsModalVisible2] = useState(false);
    const [yaoPin, setYaoPin] = useState("")
    const [yiSheng, setYiSheng] = useState("")
    const [total, setTotal] = useState("0")
    const [yaoPinList, setYaoPinList] = useState([{
        value: '',
        label: '',
    }])
    const [yiShengList, setYiShengList] = useState([{
        value: '',
        label: '',
    }])

    const paginationProps = {
        onChange: (page) => {
            getdata(page)
        },
        pageSize: 10,
        total: total,
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条数据`,
        position: ["bottomCenter"]
    }
    // 模态框取消按钮事件
    const handleCancel = () => {
        setIsModalVisible1(false);
        setIsModalVisible2(false);
    };
    //查询日期
    function riQi(date, dateString) {
        console.log(date, dateString);
    }
    //查询按钮
    const chaXun = (value) => {
        console.log(value);
        // console.log(typeof value.riQi.format('YYYY-MM-DD'));
        let temp = {}
        if (value.riQi === undefined) {
            temp.jiJiaRiQi = undefined
        } else {
            temp.jiJiaRiQi = value.riQi.format('YYYY-MM-DD')
        }
        // temp.jiJiaRiQi=value.riQi.format('YYYY-MM-DD')
        temp.xingMing = value.xingMing
        temp.yaoPinDaiHao = value.yaoPinDaiHao
        temp.yiLiaoKaHao = value.yiLiaoKaHao
        temp.page = 1
        axios("/chuFangRiJi/chaXunFenYe", {
            method: "get",
            headers: { "Content-Type": "application/json" },
            params: temp
        })
            .then(res => {
                console.log(res);
                if (res.data.code === 0) {
                    let data = res.data.data
                    let tempArr = []
                    for (let i = 0; i < data.length; i++) {
                        let temp = {}
                        temp.xingMing = data[i].xingMing
                        temp.yiLiaoKaHao = data[i].yiLiaoKaHao
                        temp.zhenDuanYiSheng = data[i].yiShengMingCheng
                        temp.yaoPin = data[i].yaoPinJiaGe.yaoPinMing
                        temp.shuLiang = data[i].shuLiang
                        temp.riQi = data[i].jiJiaRiQi.split(" ")[0]
                        temp.key = data[i].id
                        temp.zongYaoFei = data[i].jinE
                        tempArr.push(temp)
                    }
                    setDataBase(tempArr)
                    console.log(tempArr);
                    setTotal(res.data.count)
                    message.success('查询成功');

                }
            })
            .catch(err => {
                console.log(err);
            })
    }
    //修改按钮
    const [form] = Form.useForm()
    const xiuGai = (row) => {
        console.log(row);
        setIsModalVisible1(true);
        form.setFieldsValue(row)
        sessionStorage.setItem("xiuGaiId", row.key)
        getYaoPin()
        getYiShengXM()

    }
    //删除按钮
    const shanChu = (row) => {
        console.log(row);
        let id = row.key
        axios("/chuFangRiJi/shanChuById", {
            method: "get",
            headers: { "Content-Type": "application/json" },
            params: { id }
        })
            .then(res => {
                console.log(res);
                if (res.data.code === 200) {
                    getdata(1)
                    message.success('删除成功');
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
    //打印按钮
    const daYin = (row) => {
        props.location.state = row.key
        props.history.push("/mz/TongJi1")
        // onClick={() => { daYin(row) }}

    }
    //保存修改
    const baoCunXiuGai = (value) => {
        setIsModalVisible1(false);
        console.log(value);
        let id = parseInt(sessionStorage.getItem("xiuGaiId"))
        let data = {}
        data.xingMing = value.xingMing
        data.shuLiang = value.shuLiang
        data.yiLiaoKaHao = value.yiLiaoKaHao
        data.yaoPinDaiHao = value.yaoPinDaiHao
        data.id = id
        data.yiShengMingCheng = value.zhenDuanYiSheng
        console.log(data);
        axios("/chuFangRiJi/gengXinById", {
            method: "post",
            headers: { "Content-Type": "application/json" },
            data: data
        })
            .then(res => {
                console.log(res);
                if (res.data.code === 200) {
                    getdata(1)
                    message.success('修改成功');

                }
            })
            .catch(err => {
                console.log(err);
            })
    }
    //添加按钮
    const tianJia = () => {
        setIsModalVisible2(true);
        getYaoPin()
        getYiShengXM()
    }
    //table数据
    const [dataBase, setDataBase] = useState([])
    //行内数据
    const columns = [
        {
            title: "姓名",
            dataIndex: "xingMing",
            key: "xingMing",
            align: 'center',
        },
        {
            title: "医疗卡号",
            dataIndex: "yiLiaoKaHao",
            key: "yiLiaoKaHao",
            align: 'center',
        },
        {
            title: "诊断医生",
            dataIndex: "zhenDuanYiSheng",
            key: "zhenDuanYiSheng",
            align: 'center',
        }, {
            title: "药品",
            dataIndex: "yaoPin",
            key: "yaoPin",
            align: 'center',
        },
        {
            title: "药品数量",
            dataIndex: "shuLiang",
            key: "shuLiang",
            align: 'center',
        },
        {
            title: "总药费",
            dataIndex: "zongYaoFei",
            key: "zongYaoFei",
            align: 'center',
        },
        {
            title: "日期",
            dataIndex: "riQi",
            key: "riQi",
            align: 'center',
        },
        {
            title: "操作",
            dataIndex: 'operation',
            key: 'operation',
            ellipsis: true,
            align: 'center',
            width: "300px",
            render: (text, row) => {
                return (
                    <>
                        <Button onClick={() => { xiuGai(row) }} style={{ backgroundColor: "rgb(133,206,97)", color: "white", marginRight: "20px" }}>修改</Button>
                        <Button onClick={() => { shanChu(row) }} style={{ backgroundColor: "red", color: "white", marginRight: "20px" }}>删除</Button>
                        <Link to={{ pathname: "/mz/TongJi1", state: row }}  ><Button style={{ backgroundColor: "blue", color: "white", marginRight: "20px" }}>打印</Button></Link>
                    </>
                )
            }
        }
    ]
    const getYiShengXM = () => {
        axios("/yiShengSuoShuKeShi/chaXunAll", {
            method: "get",
            headers: { "Content-Type": "application/json" },
        })
            .then(res => {
                if (res.data.code === 200) {
                    let tempArr = []
                    for (let i = 0; i < res.data.list.length; i++) {
                        let temp = {}
                        temp.value = res.data.list[i].yiShengMingCheng
                        temp.label = res.data.list[i].yiShengMingCheng
                        tempArr.push(temp)
                    }
                    setYiShengList(tempArr)
                    // console.log(yaoPinList);
                }
            })
            .catch(err => {
                console.log(err);
            })
    }
    function YPMC(value) {
        console.log(value);
        setYaoPin(value)
    };
    function YSMC(value) {
        // console.log(value);
        setYiSheng(value)
    };
    //获取下拉列表药物信息
    const getYaoPin = () => {
        axios("/yaoPinJiaGe/chaXunAll", {
            method: "get",
            headers: { "Content-Type": "application/json" },
        })
            .then((res) => {
                // console.log(res);
                if (res.data.code === 200) {
                    let tempArr = []
                    for (let i = 0; i < res.data.list.length; i++) {
                        let temp = {}
                        temp.value = res.data.list[i].yaoPinDaiMa
                        temp.label = res.data.list[i].yaoPinMing
                        tempArr.push(temp)
                    }
                    setYaoPinList(tempArr)
                    // console.log(yaoPinList);
                }

            })
            .catch(err => {
                console.log(err);
            })
    }
    //获取表格数据
    const getdata = (page) => {
        axios("/chuFangRiJi/chaXunFenYe", {
            method: "get",
            headers: { "Content-Type": "application/json" },
            params: { page: page }
        })
            .then((res) => {
                if (res.data.code === 0) {
                    let data = res.data.data
                    let tempArr = []
                    for (let i = 0; i < data.length; i++) {
                        let temp = {}
                        temp.xingMing = data[i].xingMing
                        temp.yiLiaoKaHao = data[i].yiLiaoKaHao
                        temp.zhenDuanYiSheng = data[i].yiShengMingCheng
                        temp.yaoPin = data[i].yaoPinJiaGe.yaoPinMing
                        temp.shuLiang = data[i].shuLiang
                        temp.riQi = data[i].jiJiaRiQi.split(" ")[0]
                        temp.key = data[i].id
                        temp.zongYaoFei = data[i].jinE
                        tempArr.push(temp)
                    }
                    setDataBase(tempArr)
                    console.log(tempArr);
                    setTotal(res.data.count)
                }
            })
            .catch((err) => {
                console.log(err);
            })
    }
    useEffect(() => {
        getdata(1)
    }, [])
    const queDingTianJia = (value) => {
        console.log(value);
        let data = {}
        data.xingMing = value.xingMing
        data.yiLiaoKaHao = value.yiLiaoKaHao
        data.yiShengMingCheng = value.zhenDuanYiSheng
        data.yaoPinDaiHao = value.yaoPin
        data.shuLiang = parseInt(value.yaoPinShuLiang)
        axios("/yaoPinJiaGe/chaXunById", {
            method: "get",
            headers: { "Content-Type": "application/json" },
            params: { id: parseInt(data.yaoPinDaiHao) }
        })
            .then(res => {
                console.log(res);
                data.danJia = res.data.obj.danJia
                data.danWei = res.data.obj.danWei
                if (res.data.code === 200) {
                    axios("/chuFangRiJi/xinZeng", {
                        method: "post",
                        headers: { "Content-Type": "application/json" },
                        data: data
                    })
                        .then(res => {
                            console.log(res);
                            if(res.data.code===200){
                                getdata(1)
                                message.success('添加成功');
                            }else{
                                message.error('医疗卡号重复，添加失败');
                            }
                            form.setFieldsValue()
                        })
                        .catch(err => {
                            console.log(err);
                        })
                }
            })
            .catch(err => {
                console.log();
            })

        setIsModalVisible2(false);

    }
    return (
        <Row className="contentBody">
            {/* 查询Form表单 */}
            <Col span={24} className="contentBody-col">
                <Form layout='inline' onFinish={chaXun}>
                    <Form.Item
                        label="姓名"
                        name="xingMing"
                    >
                        <Input placeholder="请输入姓名" />
                    </Form.Item >
                    <Form.Item label="医疗卡号" name="yiLiaoKaHao">
                        <Input placeholder="请输入医疗卡号" />
                    </Form.Item>
                    <Form.Item label="药品代号" name="yaoPinDaiHao">
                        <Input placeholder="请输入药品卡号" />
                    </Form.Item>
                    <Form.Item label="日期" name="riQi">
                        <DatePicker onChange={riQi} placeholder="请选择日期" />
                    </Form.Item>
                    <Form.Item>
                        <Button htmlType="submit" style={{ backgroundColor: "rgb(133,206,97)", color: "white", marginRight: "20px" }}>查询</Button>
                        <Button onClick={tianJia} style={{ backgroundColor: "rgb(230,162,60)", color: "white", marginRight: "20px" }}>添加</Button>
                    </Form.Item>
                </Form>
            </Col>
            {/* table表格 */}
            <Col span={24} className="contentBody-col">
                <Table pagination={paginationProps} collapsible="true" dataSource={dataBase} columns={columns} childrenColumnName></Table>

            </Col>
            {/* 添加模态框 */}
            <Modal footer title="计价收费添加" visible={isModalVisible2} onCancel={handleCancel} >
                <Form onFinish={queDingTianJia} layout="vertical" >
                    <Form.Item
                        label="姓名"
                        name="xingMing"
                    >
                        <Input placeholder="请输入姓名" />
                    </Form.Item >
                    <Form.Item label="医疗卡号" name="yiLiaoKaHao">
                        <Input placeholder="请输入医疗卡号" />
                    </Form.Item>
                    <Form.Item label="诊断医生" name="zhenDuanYiSheng">
                        <Select options={yiShengList} value={yiSheng} onChange={YSMC} placeholder="请选择诊断医生" />

                    </Form.Item>
                    <Form.Item label="药品" name="yaoPin">
                        <Select options={yaoPinList} value={yaoPin} onChange={YPMC} placeholder="请选择药品" />
                    </Form.Item>
                    <Form.Item label="药品数量" name="yaoPinShuLiang">
                        <Input placeholder="请输入药品数量"></Input>
                    </Form.Item>
                    <Form.Item>
                        <Button htmlType="submit" type="primary">
                            确定添加
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
            {/* 修改模态框 */}
            <Modal footer title="计价收费修改" visible={isModalVisible1} onCancel={handleCancel}  >
                <Form onFinish={baoCunXiuGai} layout="vertical" form={form}>
                    <Form.Item
                        label="姓名"
                        name="xingMing"
                    >
                        <Input placeholder="请输入姓名" />
                    </Form.Item >
                    <Form.Item label="医疗卡号" name="yiLiaoKaHao">
                        <Input placeholder="请输入医疗卡号" />
                    </Form.Item>
                    <Form.Item label="诊断医生" name="zhenDuanYiSheng">
                        <Select options={yiShengList} value={yiSheng} onChange={YSMC} placeholder="请选择诊断医生" />
                    </Form.Item>
                    <Form.Item label="药品" name="yaoPin">
                        <Select options={yaoPinList} value={yaoPin} onChange={YPMC} placeholder="请选择药品" />
                    </Form.Item>
                    <Form.Item label="数量" name="shuLiang">
                        <Input />
                    </Form.Item>
                    <Form.Item>
                        <Button htmlType="submit" type="primary">
                            确定修改
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </Row>
    )
}
